<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" (click)="gotohome()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
    <ion-title>actionsheet</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h3>属性</h3>
  <div>
      <ion-button block (click)="presentActionSheet()">actionsheet</ion-button>
  </div>
  <div>
      <p>animated:false (关闭弹窗动画)</p>
      <ion-button block (click)="presentActionSheeta()">actionsheet</ion-button>
  </div>
  <div>
      <p>backdropDismiss:false (取消点击背景关闭弹窗)</p>
      <ion-button block (click)="presentActionSheetb()">actionsheet</ion-button>
  </div>
  <div>
      <p>cssClass:black (添加样式名为black)</p>
      <ion-button block (click)="presentActionSheetc()">actionsheet</ion-button>
  </div>
  <div>
      <p>buttons (添加button按钮)</p>
      <ion-button block (click)="presentActionSheetd()">actionsheet</ion-button>
  </div>
  <div>
      <p>enterAnimation (显示弹窗时要使用的动画)</p>
      <ion-button block (click)="presentActionSheete()">actionsheet</ion-button>
  </div>
  <div>
      <p>header (弹窗标题)</p>
      <ion-button block (click)="presentActionSheetf()">actionsheet</ion-button>
  </div>
  <div>
      <p>keyboardClose:true (显示弹窗层的同时关闭虚拟键盘)</p>
      <ion-button block (click)="presentActionSheetg()">actionsheet</ion-button>
  </div>
  <div>
      <p>leaveAnimation (关闭弹窗时要使用的动画)</p>
      <ion-button block (click)="presentActionSheeth()">actionsheet</ion-button>
  </div>
  <div>
      <p>mode (ios和安卓风格选择)</p>
      <ion-button block (click)="presentActionSheeti()">actionsheet</ion-button>
  </div>
  <div>
      <p>subHeader (副标题)</p>
      <ion-button block (click)="presentActionSheetj()">actionsheet</ion-button>
  </div>
  <div>
      <p>translucent:true (当为true时，弹窗将是半透明状态，仅在ios模式下适用)</p>
      <ion-button block (click)="presentActionSheetK()">actionsheet</ion-button>
  </div>

  <h3>事件周期</h3>
  <div>
      <p>事件周期一共有4个（ionActionSheetDidDismiss,  ionActionSheetDidPresent,  ionActionSheetWillDismiss,  ionActionSheetWillPresent）</p>
      <ion-button block (click)="presentActionSheetl()">actionsheet</ion-button>
  </div> 

  <h3>CSS</h3>
  <div>
     <p>--background</p>
     <p>--background-activated</p>
     <p>--background-selected</p>
     <p>--color</p>
     <p>--height</p>
     <p>--max-height</p>
     <p>--max-width</p>
     <p>--min-height</p>
     <p>--min-width</p>
     <p>--width</p>
  </div>
  <ion-button block (click)="presentActionSheetm()">actionsheet</ion-button>
</ion-content>
